<template>
  <div class="capabilityConfig">
    <div class="step">
      <el-steps :active="active" simple finish-status="success">
        <el-step title="配置版本"></el-step>
        <el-step title="维度配置"></el-step>
        <el-step title="能力项"></el-step>
        <el-step title="能力项配置"></el-step>
        <el-step title="指标评分卡"></el-step>
      </el-steps>
      <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
    </div>
    <div class="content">
      <div class="version" v-show="active == 0">
        <version v-on:nextProp="nextProp"></version>
      </div>
      <div class="craft" v-show="active == 1">
        <craft v-on:nextProp="nextProp" :craftId="craftId"></craft>
        <el-button class="pervious" @click="next_1">版本配置</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import version from "./component/version";
import craft from "./component/craft";
export default {
  name: "capabilityConfig",
  components: { version,craft },
  data() {
    return {
      active: 0,
      craftId:''
    };
  },

  methods: {
    nextProp(data,index){
     this.active=this.active+1
     if(index=='craft'){
       this.craftId=data.proversionid
     }
    },
    next() {
      // this.active++
      if (this.active++ > 2) this.active = 0;
    },
    next_1(){
      this.active--
    }
  },
};
</script>

<style lang="scss" scoped>
.capabilityConfig {
  margin: 20px;
  position: relative;
}
</style>
